<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .active {
            color: pink;
            font-weight: 700;
        }
    </style>
    <script src="../../vue.js"></script>
</head>

<body>
    <pre>
        ==>  作用域插槽的 作用就是 父元素 获取 子元素的值 并 处理

        首先 通过 父元素 传递值给 子元素 
        子元素 在模板字符串中 用 slot 的属性 保存 父元素 传递过来的值
        子元素（子组件）标签 中 使用属性 slot-scope 来获取 模板字符串中使用 slot 属性 保存的值
        然后在通过添加样式等方法 更改 数据 在页面中显示的样式

    </pre>
    <div class="box">
        <wzp :hero='heroList'>
            <template slot-scope='heroLists'>
                <span  :class='heroLists.heros.id === 2 ? "active" : ""'>{{ heroLists.heros.name }}</span>
                <!-- <span v-if='heroLists.heros.id == 2' class='active'>{{ heroLists.heros.name }}</span>
                <span v-else >{{ heroLists.heros.name }}</span> -->
            </template>
        </wzp>
    </div>
    <script>
        Vue.component('wzp', {
            props: ['hero'],
            template: `
            <div>
                <ul>
                    <li v-for='item in hero'>
                        <slot :heros='item'></slot>
                    </li>
                </ul>
            </div>
            `
        })
        var vm = new Vue({
            el: '.box',
            data: {
                heroList: [{
                    id: 1,
                    name: '亚索'
                }, {
                    id: 2,
                    name: '薇恩'
                }, {
                    id: 3,
                    name: '维鲁斯'
                }]
            }
        })
    </script>
</body>

</html>